<!-- 广场 - 在线课程 - 详情 -->
<template>
  <view>
    <view class="mx-4 pb-25">
      <u-image :src="state.data?.cover_image" width="100%" height="456" border-radius="12" />
      <!--课程标题-->
      <view class="py-3">
        <view class="c-#333 text-40 font-semibold">{{ state.data?.class_name || '' }}</view>
        <view class="c-#999 text-28 mt-2.5">{{ state.data?.desc || '' }}</view>
      </view>
      <u-line></u-line>
      <!--课程信息-->
      <view class="flex my-4">
        <view class="mr-10">
          <view class="c-#666 text-24">课时</view>
          <view class="mt-1 c-#333 text-32 font-semibold">{{ state.data?.chapters_num || 0 }}</view>
        </view>
        <view class="mr-10">
          <view class="c-#666 text-24">在学人数</view>
          <view class="mt-1 c-#333 text-32 font-semibold">{{ state.data?.study_num || 0 }}</view>
        </view>
        <view class="mr-10">
          <view class="c-#666 text-24">总时长</view>
          <view class="mt-1 c-#333 text-32 font-semibold">{{ state.data?.total_duration || '--' }}</view>
        </view>
      </view>
      <u-line></u-line>
      <!--课程讲师-->
      <view class="my-2">
        <u-image @click="previewImage([state.data?.teacher_desc], 0)"  :src="state.data?.teacher_desc" width="686" height="180" border-radius="12" />
      </view>
      <u-line></u-line>
      <!--课程目录-->
      <view class="mt-3">
        <view class="flex justify-between items-center">
          <view class="c-#333 text-40 font-semibold">课程目录</view>
          <view v-if="isShowExperienceButton" class="btn-experience" @click="navigate(`summary/index?fromType=${state.fromType}&id=${state.id}`)">学习心得</view>
        </view>
        <view v-if="!isCourseAvaliable" class="mt-2 px-3 py-3 c-#f4af22 text-24 rounded-sm bg-#fef7e8">
          该课程为付费内容，点击购买当前课程解锁全部，或加入会员免费观看线上所有课程~
        </view>
        <!--课程列表-->
        <view 
          v-for="item in state.data?.chapter" 
          :key="item.id" 
          class="flex mt-3"
          @click="onChapterClick(item)"
        >
          <view class="flex-shrink-0 relative w-160 h-120 rounded-1.5 overflow-hidden">
            <image class="absolute left-0 top-0 w-full h-full" :src="item.cover_image" />
            <view class="chapter-mask-wrap">
              <image v-if="isCourseAvaliable" class="w-44 h-44" src="/package_square/static/images/ic_play.png" />
              <image v-else class="w-44 h-44" src="/package_square/static/images/ic_lock.png" />
              <view class="absolute right-8 bottom-6 text-20 text-white">{{ item.duration }}</view>
            </view>
          </view>
          <view class="flex-1 flex flex-col justify-between ml-2">
            <view class="text-28 text-maxline-2" :class="state.data?.last_chapter == item.id ? 'c-primary': 'c-#333'">{{ item.chapter_name || '' }}</view>
            <view class="flex items-center">
              <view class="flex-1 flex items-center text-24 c-#999">
                <text class="text-26">{{ item.learn_person || 0 }}人学过</text>
                <template v-if="state.data?.class_status != 0">
                  <text class="mx-2">|</text>
                  <text>已学{{ numFormat(item.progress || 0) }}%</text>
                </template>
              </view>
              <view v-if="item.is_try == 1 && !isCourseAvaliable" class="flex-shrink-0 btn-try" @click.stop="navigate(`video/try?id=${state.id}&chapterId=${item.id}`)">试看</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--底部按钮-->
    <view v-if="!isCourseAvaliable" class="bottom-wrap-16 flex items-center bg-white border-top px-4">
      <view class="flex-1 c-#FF513A text-36">￥{{ numFormat(state.data?.price || 0) }}</view>
      <view class="flex flex-shrink-0">
        <view class="button-buy" @click="navigate(`/package_square/pages/course/purchase?id=${state.id}`)">购买课程</view>
        <view class="button-add ml-2" @click="navigate('/package_user/pages/vip/add')">加入会员</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { navigate,previewImage } from '@/common/util/uni';
import { numFormat } from '@/common/util/format';
import { getOnlineCourseDetail } from '@/common/http/module/square';
import { useUserStore } from '@/store/user';

const userStore = useUserStore()

const state = reactive({
  id: '',
  data: '',
  fromType: '', // 学社-课程进入都可看
});

const isFree = computed(() => userStore.isVip || userStore.isConsultant)
const isCourseAvaliable = computed(() => isFree.value || state.data?.class_status == 1 || state.fromType == 'society')
const isShowExperienceButton = computed(() => {
  if (!isCourseAvaliable.value) return false
  if (!state.data?.chapter) return false
  if(state.data?.chapter.length==0) return false
  // return state.data?.chapter?.filter(item => item.progress >= 100)?.length == state.data?.chapter?.length
  return true
})

watch(() => isFree.value, (val) => {
  if (val) loadData()
})

function loadData() {
  getOnlineCourseDetail(state.id).then((res) => {
    state.data = res.data;
  });
}

function refresh() {
  loadData();
}

function onChapterClick(item) {
  if (!isCourseAvaliable.value) return
  navigate(`video/detail?fromType=${state.fromType}&id=${state.id}&chapterId=${item.id}`)
}

onLoad((options) => {
  state.id = options.id;
  state.fromType = options.fromType ?? ''
  if (options.scene) {
    const scene = options.scene
    const ids = scene.split('_')
    if (!ids || ids.length <= 1) return
    userStore.setParentId(ids[0])
    state.id = ids[1]
  }
  loadData();
});

onShow(() => loadData())

defineExpose({ refresh });
</script>

<style lang="scss" scoped>
.border-top {
  border-top: 2rpx solid #eee;
}

.btn-try {
  width: 100rpx;
  height: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12rpx;
  background-color: #ffffff;
  border: 2rpx solid #f4af22;
  color: #f4af22;
}

.button-buy {
  width: 220rpx;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  border: 2rpx solid #f4af22;
  font-size: 28rpx;
  color: #f4af22;
}

.button-add {
  width: 220rpx;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  background-color: #f4af22;
  color: #fff;
  font-size: 28rpx;
}

.label-style {
  position: absolute;
  z-index: 1000;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx 0px 12rpx 0rpx;
  background-color: #f4af22;
}

.button-directory {
  position: absolute;
  z-index: 10000;
  top: 20rpx;
  right: 10rpx;
  width: 90rpx;
  height: 146rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.16);
  color: #f4af22;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.course-style-selected {
  width: 240rpx;
  height: 280rpx;
  display: inline-block;
  background-color: #f6f6f6;
  color: #f4af22;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.course-style {
  width: 240rpx;
  height: 280rpx;
  display: inline-block;
  background-color: #f6f6f6;
  color: #333333;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.directory-style-selected {
  width: 330rpx;
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #f4af22;
  border-radius: 12rpx;
}

.directory-style {
  width: 330rpx;
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #333;
  border-radius: 12rpx;
}

.overflow-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: no-wrap;
  text-overflow: ellipsis;
}

.chapter-mask-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.btn-experience {
  padding: 8rpx 22rpx;
  border-radius: 12rpx;
  border: 2rpx solid #F4AF22;
  color: #F4AF22;
  font-weight: 500;
  font-size: 24rpx;
}
</style>
